<template>
	<view>
		<view class="Describe">
			<view class="Describe-title1">通过手机找回密码</view>
			<view class="Describe-title2">建议输入您的账号/手机号，快速找回密码</view>
			<view class="Describe-title2">注：新用户用户名为手机号，老用户用户名为字母加数字</view>
		</view>
		<!-- 账号密码输入框 -->
		<view class="form">
			<view class="username">
				<input placeholder="用户名" v-model="username" placeholder-style="color: #d7d7d9;" />
			</view>
			<view class="usermobile">
				<input placeholder="手机号码" v-model="phoneNumber" placeholder-style="color: #d7d7d9;" />
			</view>
			<view class="password">
				<input placeholder="验证码" type="number" v-model="vcode" placeholder-style="color: #d7d7d9;" />
				<button :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn"
					@tap="sendCode">{{codeBtn.text}}</button>
			</view>
			<view class="btn" @tap="toPage()">下一步</view>
		</view>
		<view class="solution" @click="togglePopup('center', 'image')">
			<image src="../../../static/img/wenhao.png"></image> 短信验证码收不到？
		</view>

		<!-- 收不到验证码？ -->
		<uni-popup ref="showimage" :type="type" :mask-click="true" @change="change">
			<view class="popup-yzm">
				<view class="yzm-close" @click="cancel('image')">
					<image src="../../../static/img/close.png" />
				</view>
				<view class="yzm-title">收不到验证码？</view>
				<view class="yzm-text">
					<view>1、查看是否误设了短信拦截。</view>
					<view>2、若该号码欠费停机，建议您更换手机号码或者缴费后第二天重新获取。</view>
					<view>3，联系运营商（<text class="yunyingshang" @click="yunyingshang">4008109688</text>）取消黑名单。</view>
					<view>4，如果是信号网络延迟，可稍后常识重新获取。</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	// import md5 from "../../../common/SDK/md5.min.js";
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			// uniPopup
		},
		data() {
			return {
				type: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds,
					vtoken: ''
				},
				phoneNumber: '',
				password: '',
				username: '',
				vcode: ''
			}
		},
		onShow() {
			this.getSendCodeVToken();
		},
		onLoad() {},
		computed: {
			disableCodeBtn: function() {
				return this.codeBtn.waitingCode;
			}
		},
		methods: {
			toPage() {
				uni.hideKeyboard();
				if (this.username.replace(/(^\s*)|(\s*$)/g, "") == '') {
					uni.showToast({
						title: '请填写用户名',
						icon: "none"
					});
					return false;
				}
				if (this.username.replace(/(^\s*)|(\s*$)/g, "").length < 3) {
					uni.showToast({
						title: '用户名格式有误',
						icon: "none"
					});
					return false;
				}
				//验证手机号码
				if (!(/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (this.vcode.replace(/(^\s*)|(\s*$)/g, "") == '') {
					uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.location = 5267;
				data.vcode = this.vcode;
				data.mobile = this.phoneNumber;
				data.username = this.username;
				data.type = 0;
				if (/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
					data.type = 1;
				}

				uni.request({
					url: this.baseConfig.serverURL + 'User/login/GetPasswordHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.hideLoading()
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								uni.hideLoading();
								if (res.data.retbs == 1) {
									uni.showModal({
										content: res.data.msg,
										showCancel: false
									})
									return;
								} else {
									uni.navigateTo({
										url: 'resetpasswd2?userid=' + res.data.other + '&encrypt=' +
											res.data.other2.encrypt
									});
								}
							}
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '验证失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '验证失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			sendCode() {
				//等待验证码
				if (this.codeBtn.waitingCode)
					return false;
				//如果初始验证密钥为空，重新获取
				if (this.phoneNumber != "" && this.codeBtn.vtoken == "") {
					this.getSendCodeVToken();
				}
				//验证手机号码
				if (!(/^1\d{10}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				} else if (this.codeBtn.vtoken == "") {
					uni.showToast({
						title: '当前页面已失效，请重新打开本页面！',
						icon: "none"
					});
					return false;
				}
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + '秒后重发';

				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + '秒后重发';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.location = 5267;
				data.vtoken = this.codeBtn.vtoken;
				data.mobile = this.phoneNumber;

				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: '获取验证码失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取验证码失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			/***发送验证码验证串**/
			getSendCodeVToken() {
				let data = this.initNewData();
				//位置类别
				data.location = 5267;
				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeTokenHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data.ret) {
								//更新vtoken 
								this.codeBtn.vtoken = res.data.other;
							} else {
								if (jmsg.retbs = 12586) {
									uni.showToast({
										title: jmsg.msg || '您的操作过于频繁，请稍候再试！',
										icon: "none"
									});
								} else {
									setTimeout(this.getSendCodeVToken(), 1000)
								}
							}
						} else {
							// setTimeout(this.getSendCodeVToken(), 1000)
						}
					},
					fail: (res) => {
						// setTimeout(this.getSendCodeVToken(), 1000)
					}
				})
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				//console.log('是否打开:' + e.show)
			}
		},
		onBackPress() {
			//this.$refs['showpopup'].close()
		}
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	.Describe {
		width: 80%;
		padding: 0 10%;
		margin: 40rpx auto;

		.Describe-title1 {
			font-size: 36rpx;
			color: #000000;
		}

		.Describe-title2 {
			font-size: 26rpx;
			color: #CCCCCC;
			margin-top: 10rpx;
		}
	}

	.form {
		.btn {
			font-size: 32rpx;
		}
	}

	.password {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		button {
			font-size: 28rpx;
			color: #5a90e7 !important;
			// border: 1px solid #5a90e7;
			border-radius: 3px;
			padding: 14rpx 0px;
			width: 40%;
			text-align: center;
			line-height: 36rpx;
			background-color: #FFFFFF !important;

			&:after {
				border: none
			}

			&.active {
				background-color: #5a90e7;
				color: #fff;
			}
		}
	}

	.solution {
		position: fixed;
		bottom: 100rpx;
		font-size: 26rpx;
		color: #CCCCCC;
		width: 40%;
		left: 30%;

		image {
			width: 52rpx;
			height: 54rpx;
			vertical-align: middle;
		}
	}

	.popup-yzm {
		background-color: #fff;
		width: 90%;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;

		.yzm-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;

			image {
				width: 50rpx;
				height: 49rpx;
			}
		}

		.yzm-title {
			padding-top: 35rpx;
			text-align: center;
			font-size: 35rpx;
		}

		.yzm-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			padding: 20rpx 64rpx;

			view {
				margin-bottom: 20rpx;
			}

			.yunyingshang {
				text-decoration: underline;
				color: #2660CD;
			}
		}
	}
</style>